<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS 验证</title>
    <script>

        /*
        * JavaScript 表单验证
         JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

         被 JavaScript 验证的这些典型的表单数据有：

         用户是否已填写表单中的必填项目？
         用户输入的邮件地址是否合法？
         用户是否已输入合法的日期？
         用户是否在数据域 (numeric field) 中输入了文本？
        * */

        /* 校验必填 或者 必选项目 */
        function validate_required(field,alerttxt) {
            /* */
            with(field){
                if (value == null || value == "" ){
                    alert(alerttxt);
                    return false
                }else {
                    return true
                }
            }
        }

        function validate_form(thisform) {
            with(thisform){
                if (validate_required(email,"Email must be filled out!") == false){
                    email.focus();
                    return false;
                }
            }
        }

        /*
        * E-mail 验证
         下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
         意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
         * */
        function validate_email(field,alerttxt) {

            with(field){

                if (value == null || value == "" ){
                    alert(alerttxt);
                    return false;
                }

                apos = value.indexOf("@");
                dotpos = value.lastIndexOf(".");

                if (apos < 1||dotpos-apos<2){
                    alert(alerttxt);
                    return false
                }else {
                    return true
                }
            }
        }

        /*第二个校验测试的函数*/
        function validate_form_two(thisform) {
            with(thisform){
                if (validate_email(email_two,"不是正确格式的 邮箱地址") == false){
                    email_two.focus();
                    return false;
                }

            }
        }

    </script>
</head>
<body>

    <!--  测试检测 不能为空-->
    <form action="submitpage.html" onsubmit="return validate_form(this)" method="post">
        Email:<input type="text" name="email" size="30"/>
        <input type="submit" value="提交"/>
    </form>

    <!--简单的检测 邮箱的输入 -->
    <form action="sumitpage.html" onsubmit="return validate_form_two(this)" method="post">
        第二个Email校验: <input type="text" name="email_two" size="30">
        <input type="submit" value="第二个校验"/>
    </form>
</body>
</html>